<%--
  Created by IntelliJ IDEA.
  User: 33669
  Date: 2021/9/11
  Time: 15:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            $.ajax({
                url:"city",
                data:{"method":"findCityByPid","pid":0},
                type:"get",
                dataType:"json",
                success:function (data) {
                    //将数据渲染到下拉列表中
                    $(data).each(function (i,el) {
                        var op = '<option value="'+el.cid+'">'+el.cname+'</option>';
                        $('[name="province"]').append(op);
                    })

                }
            })

            $.ajax({
                url:"city",
                data:{"method":"findCityByPid","pid":1},
                type:"get",
                dataType:"json",
                success:function (data) {
                    //将数据渲染到下拉列表中
                    $(data).each(function (i,el) {
                        var op = '<option value="'+el.cid+'">'+el.cname+'</option>';
                        $('[name="city"]').append(op);
                    })

                }
            })

            //给省绑定内容改变事件
            $('[name="province"]').change(function () {
                //清空市
                $('[name="city"]').empty();
                //获取省的pid号
                var pid = $(this).val();
                //请求服务器查询
                $.ajax({
                    url:"city",
                    data:{"method":"findCityByPid","pid":pid},
                    type:"get",
                    dataType:"json",
                    success:function (data) {
                        //将数据渲染到下拉列表中
                        $(data).each(function (i,el) {
                            var op = '<option value="'+el.cid+'">'+el.cname+'</option>';
                            $('[name="city"]').append(op);
                        })

                    }
                })
            })

        })
    </script>
</head>
<body>
<select name="province">

</select>省
<select name="city">

</select>市

</body>
</html>
